<template>
  <div class="addPeople">
    <el-dialog title="选择人员" :visible="visible" width="800px" :close-on-click-modal="false" @close="handleClose">
      <el-form :model="form" :inline="true" label-width="70px">
        <el-form-item label="姓名">
          <el-input size="small" clearable v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="居住小区">
          <el-select size="small" clearable v-model="form.communityName" placeholder="请选择" filterable>
            <el-option
              v-for="item in optionsList"
              :key="item.id"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :row-key="getRowKeys"
        border
        size="small"
        header-cell-class-name="header-class"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="40">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="姓名"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="居住地址"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="手机号码"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <Pagination :small="true" :total="page_total" @pageChange="pageChange" :page="page"></Pagination>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "addPeople",
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        form: {},
        optionsList: [],
        tableData: [],
        multipleSelection: [],
        page: {
          page_index: 1,
          page_limit: 10
        },
        page_total: 0, //总条数
      }
    },
    methods: {
      // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
      getRowKeys(row) {
        return row.id
      },
      pageChange(item) {
        this.page.page_index = item.page_index;
        this.page.page_limit = item.page_limit;
        this.init()
      },
      handleClose() {
        this.$emit("update:visible", false)
        this.$emit('handleClose')
      },
      handleSearch() {
        this.page.page_index = 1
        this.init()
      },
      init() {
        let params = {
          pageNo: this.page.page_index,
          pageSize: this.page.page_limit,
          ...this.form
        }
        this.$ajax.peng.getInhabitList(params).then(data => {
          this.tableData = data.data.list
          this.page_total = data.data.total
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      submit() {
        this.$emit('checkedSelection',this.multipleSelection)
        this.handleClose()
      },
      //查询所有小区
      getSubBuildList() {
        let params = {
          level: 1,
        }
        this.$ajax.peng.getSubBuildList(params).then(data => {
          this.optionsList = data.data
        })
      },
    },
    mounted() {
      this.getSubBuildList()
      this.init()
    },
  }
</script>

<style scoped>

</style>
